<template>
  <div class="account-content">
    <div class="box-left">
      <div class="avatar-container">
        <div class="ant-upload-preview" @click="$refs.modal.edit(1)">
          <a-icon type="cloud-upload-o" class="upload-icon" />
          <div class="mask">
            <a-icon type="plus" />
          </div>
          <img :src="option.img" />
        </div>
      </div>
      <div class="tab-container">
        <a-menu style="width: 100%" :default-selected-keys="['0']" :open-keys.sync="openKeys" mode="inline"
          @click="handleClick">
          <a-menu-item key="0">
            基本信息
          </a-menu-item>
          <!-- <a-menu-item key="1">
            安全设置
          </a-menu-item> -->
          <!-- <a-menu-item key="2">
            个人权限
          </a-menu-item> -->
          <a-menu-item key="3">
            个人日志
          </a-menu-item>
          <!-- <a-menu-item key="4">
            三方账号
          </a-menu-item> -->
        </a-menu>
      </div>
    </div>
    <div class="box-right padding-xs">
      <div class="main-content">
        <BasicSetting v-if="currentKey == 0" :userInfos="userInfos" :sysPostData="sysPostData" :sysOrgData="sysOrgData"></BasicSetting>
        <SecuritySetting v-if="currentKey == 1"></SecuritySetting>
        <SystemPermission v-if="currentKey == 2"></SystemPermission>
        <systemLog v-if="currentKey == 3"></systemLog>
        <ThirdAccount v-if="currentKey == 4"></ThirdAccount>
      </div>
    </div>
    <avatar-modal ref="modal" @ok="setavatar" />
  </div>
</template>

<script>
import AvatarModal from "./AvatarModal";
import { baseUrl } from "@/services/baseUrl";
import {
  BasicSetting,
  SecuritySetting,
  systemLog,
  SystemPermission,
  ThirdAccount
} from "./menuPage/index"

export default {
  components: {
    AvatarModal,
    BasicSetting,
    SecuritySetting,
    systemLog,
    SystemPermission,
    ThirdAccount
  },
  mixins: [],
  data() {
    return {
      activeKey: '1',
      option: {
        // img: '/avatar2.jpg',
        img: "",
        info: true,
        size: 1,
        outputType: "jpeg",
        canScale: false,
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 180,
        autoCropHeight: 180,
        fixedBox: true,
        // 开启宽度和高度比例
        fixed: true,
        fixedNumber: [1, 1],
      },
      userInfos: {},
      selectedKeys: [],
      current: ['mail'],
      openKeys: ['sub1'],
      currentKey: '0',
      title: '基本信息',
      sysPostData: [],
      sysOrgData: {}
    };
  },
  created() {
    this.getUserInfo();
  },
  mounted() {
  },
  methods: {
    getUserInfo() {
      this.$post("/mdata/user/getLoginUserInfo").then(res => {
        if (res.statusCode === 200) {
          this.userInfos = res.data.SysUser;
          this.sysPostData = res.data.SysPosition;
          this.sysOrgData = res.data.SysOrganization;
          this.option.img = this.userInfos.userHeadPortrait
          ? this.userInfos.userHeadPortrait
          : "/avatar2.jpg";
        }
      })
    },
    setavatar(url) {
      this.option.img =
        baseUrl + "/document/minio/showPic?fileuUrl=zysd-test02" + "/" + url;
      this.userInfos.avatar =
        baseUrl + "/document/minio/showPic?fileuUrl=zysd-test02" + "/" + url;
    },
    handleClick(e) {
      let arr = ['基本信息', '安全设置', '系统权限', '系统日志', '三方账号']
      this.currentKey = e.key
      this.title = arr[this.currentKey]
    },
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.account-content {
  display: flex;
  background-color: white;
  height: calc(100vh - 134px);

  .box-left {
    height: 100%;
    width: 15%;
    /*min-width: 180px;*/
    border-right: 1px solid #e8e8e8;

    .avatar-container {
      margin-top: 50px;

      .ant-upload-preview {
        position: relative;
        margin: 0 auto;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        box-shadow: 0 0 4px #ccc;

        .upload-icon {
          position: absolute;
          top: 0;
          right: 10px;
          font-size: 1.4rem;
          padding: 0.5rem;
          background: rgba(222, 221, 221, 0.7);
          border-radius: 50%;
          border: 1px solid rgba(0, 0, 0, 0.2);
        }

        .mask {
          opacity: 0;
          position: absolute;
          background: rgba(0, 0, 0, 0.4);
          cursor: pointer;
          transition: opacity 0.4s;

          &:hover {
            opacity: 1;
          }

          i {
            font-size: 2rem;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -1rem;
            margin-top: -1rem;
            color: #d6d6d6;
          }
        }

        img,
        .mask {
          width: 100%;
          max-width: 150px;
          height: 100%;
          border-radius: 50%;
          overflow: hidden;
        }
      }
    }

    .tab-container {
      width: 100%;
      margin-top: 20px
    }
  }

  .box-right {
    width: 85%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;

    .main-content {
      width: 100%;
      flex: 1;
      /*overflow: scroll;*/
    }
  }
}

/deep/.page-title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  padding-bottom: 12px;
}

.ant-menu-inline .ant-menu-item {
  text-align: center;
  padding: 0 16px !important;
}</style>
